<template>
  <div class="partNewsIndex">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack">
    </Header>
      <div class="tabs" id="tabs">
        <div class="tabsScroll">
          <div class="tabsHead">
              <p
                :style="{width:width+'px'}"
                v-for="(item,index) in tabsHead.length&&tabsHead" @click.stop="choiseHead(index)"
                  :class="{'active' :defaultIndex ===index}">
                <router-link :to="{query:{id:item.id}}">
                  <a >{{item.name}}</a>
                </router-link>
              </p>
          </div>
        </div>
        <div class="blank"> </div>
        <div class="tabContent">
          <div class="tabItem">
            <div class="swiper-container" v-if="showBanner">
              <div class="swiper-wrapper" v-if="swiperItem.length>0">
                <div class="swiper-slide" v-for="(item,index) in swiperItem">
                  <a >
                    <img :src=item.thumb alt=""  onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'" >
                  </a>
                  <p class="swiper-text">
                    <span>{{item.title}}</span>
                  </p>
                </div>
              </div>
              <div v-else style="width: 100%;height: 4rem">
                <img src="https://api.cloudcpc.com/static/index/images/codeCover2.jpg" alt="" style="width: 100%;height: 100%">
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
            </div>
            <div class="newsItemWrap">
              <router-link :to="{path:'article',query:{id:item.id,url:item.url,is_praise:item.is_praise,resources:item.resources}}"  tag="div" v-for="(item,index) in itemList" :key="index">
                <a class="newsItem" >
                    <div class="newsItemImg">
                      <img :src=item.thumb alt=""  onerror="this.onerror=null; this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
                    </div>
                    <div class="newsItemText">
                      <p class="newsItemTitle">{{item.title}}</p>
                      <p class="newsItemContent">{{item.content}}</p>
                      <p class="newsItemTime">{{item.ctime}}</p>
                    </div>
                 </a>
              </router-link>
            </div>
          </div>
        </div>
      </div>
  <!--加载更多-->
    <div class="loadComponent">
      <div class="weui-loadmore weui-loadmoreIng" v-if="loadmoreClick">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips" >正在加载</span>
      </div>
      <div class="weui-loadmore weui-loadmore_line" v-if="nomoreData">
        <span class="weui-loadmore__tips">到底了</span>
      </div>
      <div class="loadMore" style="display:block" @click.stop="loadMore" v-if="moreData">
        更多
      </div>
    </div>
    <div id="loadingToast" v-if="showLoading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
      </div>
    </div>
  </div>
</template>
<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import {mapState } from 'vuex'
  import {getQueryParam} from '@/utils/index.js'
  export default({
    data (){
      return {
        nomoreData:false,
        loadmoreClick:false,
        moreData:true,
        title:'党建新闻',
        defaultIndex:0,
        showBanner:false,
        itemList:[],
        defaultPage:1,
        showLoading:false,
        width:'',
        swiperItem:[

        ],
        tabsHead:[
        ]
      }
    },
//    watch: {
//      // 如果路由有变化，会再次执行该方法
//      "$route": "fetchData"
//    },
    computed:{
      ...mapState({
        uid:state=>state.app.loginState.uid,
        company_id:state=>state.app.company_id||getQueryParam('identifier',window.location.href).slice(0,getQueryParam('identifier',window.location.href).indexOf('/'))
      })
    },
    components:{
      Aside:aside,
      Header:header
    },
    methods:{
      fetchData(id='all',page=1){
        let that =this
        if(id==='all'){
          this.showBanner =true
        }else{
          this.showBanner =false
        }
        this.axios.get('/home/party/getPartyNews?'+`${this.baseUrl}`,{
            params:{
              cate_id:id,
              p:page,
              uid:this.uid ||localStorage.getItem('uid'),
              pageSize:5,
              company_id:this.company_id
            }
        }).then((res)=>{
//            console.log(res.data.data.news)
          if(id==='all'){
            this.swiperItem =res.data.data.recommend

//            console.log(this.swiperItem)
          }
          if(res.data.data.news.length>=0){
            if(this.loadmoreClick){
              this.loadmoreClick =false
              this.moreData =true
            }
            if(res.data.data.news.length ===0){
              this.nomoreData =true
              this.moreData =false
              this.loadmoreClick =false
            }
            that.showLoading=false
          }
          this.itemList.push(...res.data.data.news)
//          console.log(this.itemList)
        }).then((res)=>{
          var swiper =new that.Swiper('.swiper-container',{
            autoplay:1000,
            pagination:{
              el:'.swiper-pagination'
            }
          });
        })
          .catch((err)=>{
//            console.log(err)
          if(this.loadmoreClick){
            this.loadmoreClick =false
          }
            that.showLoading=false
        })
      },
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      loadMore (){
        this.loadmoreClick =!this.loadmoreClick
        this.moreData =false
        this.defaultPage ++
        this.fetchData(this.$route.query.id,this.defaultPage)
      },
      choiseHead(index){
          this.defaultIndex =index
          this.showLoading =true
          this.defaultPage =1
          this.itemList =[]
          this.moreData =true
          this.loadmoreClick =false
          this.nomoreData =false
          this.fetchData(this.$route.query.id,this.defaultPage)
      },
      init(){
          let that =this
          this.axios.get('/home/party/getPartyCate?'+`${this.baseUrl}`,
            {
              params:{
                company_id:this.company_id
              }
            })
            .then((res)=>{
              that.tabsHead =res.data.data
//              console.log(res.data.data)
              for(var i=0;i<res.data.data.length;i++){
                if(that.$route.query.id ==res.data.data[i].id){
                   that.defaultIndex=i
                }
              }
              var clientWidth =document.documentElement.clientWidth
              if(clientWidth>=750){
                clientWidth =$('body').width()
              }
              var pWidth =clientWidth/4;
              this.width =pWidth
              $('.tabsHead').css('min-width', res.data.data.length*pWidth+'px')
              $('.tabsScroll').scrollLeft(this.defaultIndex*pWidth)
          }).catch((err)=>{
              console.log(err)
          })
      }
    },
    mounted (){
      $('body').removeClass('active')
      console.log(this.company_id)
    },
    created(){
      this.init()
      this.fetchData(this.$route.query.id,this.defaultPage)
    }
  })
</script>
<style scoped="">
  #tabs{
    padding-top: 0.8rem;
    position: relative;
  }
  .tabsHead{
    line-height: 0.88rem;
    height: 0.88rem;
    font-size: 0;
  }
  .tabsHead p{
    display: inline-block;
    width: 25%;
    height: 100%;
    font-size: 0.32rem;

    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
  .tabsHead p a{
    color: #999999;
  }
  .tabsHead p.active  a{
    color: #e83329;

  }
  .tabsHead p.active {
    border-bottom: 0.02rem solid #e83329;
  }


  .tabContent{
    position:relative;
    height: 100%;

  }
  .tabContent .tabItem{
    height: 100%;
  }
  .tabContent .tabItem.active{
    display: block;
  }
  .swiper-container{
    height: 4rem;
  }
  .swiper-container .swiper-slide{
    height: 4rem;
    position: relative;
  }
  .swiper-container .swiper-slide .swiper-text{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    height:0.52rem ;
    background: rgba(0,0,0,0.6);
    line-height: 0.52rem;
    z-index: 2;
  }
  .swiper-container .swiper-slide a{
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .swiper-container .swiper-slide a img{
    width: 100%;
    height: 100%;
  }

  .swiper-container .swiper-slide .swiper-text span{
    padding-left: 0.32rem;
    font-size: 0.26rem;
    color: #fff;
    display:  inline-block;
    width: 100%;
    padding-right: 1.2rem;
    box-sizing:  border-box;
    text-overflow:  ellipsis;
    white-space:  nowrap;
    overflow:  hidden;
  }

  .swiper-pagination{

  }
  .swiper-container >>> .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: rgba(255,255,255,0.6);
    opacity: .2;
  }
  .swiper-pagination{
    text-align: right;
    height: 0.52rem;
    line-height: 0.52rem;
    bottom: 0 !important;
  }
  .swiper-container >>> .swiper-pagination-bullet-active {
    opacity: 1;
    width: 20px;
    height: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    background: rgba(255,255,255) !important;
  }
  .newsItemWrap{
    padding: 0 0.32rem;
  }
  .newsItem .newsItemImg{
    width: 2.45rem;
    height: 1.78rem;
  }
  .newsItem .newsItemImg img{
    width: 2.45rem;
    height: 1.78rem;
  }
  .newsItem .n2{
    padding-right: 0.2rem;
  }
  .newsItemImg{
    width: 2.45rem;
    height: 1.78rem;
  }
  .newsItemTitle,.newsItemContent{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .newsItem .newsItemText .newsItemContent{
    margin-top: 0.05rem;
  }
  .newsItemTime{
    font-size: 0.22rem;
    color: #999999;
  }
  .tabsScroll{
    width: 100%;
    overflow-x: scroll;
    height: 0.88rem;
  }
  .blank{
    height: 0.1rem;
    background: #f9f5f5;
  }
  .newsItem .newsItemText .newsItemContent{
    /* margin-bottom: 0.1rem; */
  }
  .newsItem .newsItemText .newsItemTitle{
    /* margin-bottom: 0.1rem; */
    vertical-align: top;
    height: 0.76rem;
    line-height: 0.38rem;
  }
  .swiper-pagination-bullet{
    opacity: 1;
  }
</style>
